<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>吸了么常见问题解答</title>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.4.2/dist/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="styles.css">
  <!-- 添加v-cloak样式，防止模板闪烁 -->
  <style>
    [v-cloak] {
      display: none;
    }

    /* 加载状态样式 */
    .page-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f5f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #e6e6e6;
      border-top: 5px solid #409EFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <style>
    /* 基础样式 */
    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: #f5f7fa;
      color: #303133;
      margin: 0;
      padding: 0;
    }

    /* 页头样式 */
    .header-center {
      text-align: center;
      margin: 30px auto;
      background: linear-gradient(135deg, #409EFF 0%, #53a8ff 100%);
      padding: 40px 20px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 900px;
      color: white;
    }

    .header-center h1 {
      font-size: 36px;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .header-center p {
      font-size: 18px;
      margin-top: 0;
      opacity: 0.9;
    }

    /* 搜索框样式 */
    .search-container {
      max-width: 700px;
      margin: 30px auto;
      padding: 0 20px;
    }

    /* 问题列表容器 */
    .faq-container {
      max-width: 850px;
      margin: 20px auto 50px;
      padding: 0 20px;
    }

    /* 单个问题卡片 */
    .faq-item {
      margin-bottom: 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* 问题标题样式 */
    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
    }

    .question-header .el-icon {
      color: #409EFF;
      font-size: 18px;
      margin-left: 10px;
      transition: transform 0.3s;
    }

    .faq-item:hover .el-icon {
      transform: translateX(5px);
    }

    /* 分类标签样式 */
    .category-tag {
      margin-right: 12px;
      font-weight: normal;
    }

    /* 答案内容样式 - 美化显示 */
    .answer-content {
      line-height: 1.8;
      color: #303133;
    }

    .answer-content h3 {
      font-size: 24px;
      color: #409EFF;
      margin-top: 0;
      margin-bottom: 20px;
      border-bottom: 2px solid #ebeef5;
      padding-bottom: 10px;
    }

    .answer-content h4 {
      font-size: 18px;
      color: #e6a23c;
      margin-top: 25px;
      margin-bottom: 15px;
      background-color: rgba(230, 162, 60, 0.1);
      padding: 10px;
      border-radius: 4px;
    }

    /* 步骤样式美化 */
    .answer-step {
      background-color: #f8f9fb;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .answer-step div {
      margin-bottom: 12px;
    }

    .answer-step div:last-child {
      margin-bottom: 0;
    }

    .answer-step-number {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      background-color: #409EFF;
      color: white;
      border-radius: 50%;
      margin-right: 10px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
    }

    /* 图片和视频样式 */
    .answer-content img,
    .answer-content video,
    .answer-content iframe {
      max-width: 100%;
      border-radius: 8px;
      margin: 15px 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .answer-content img:hover,
    .answer-content video:hover {
      transform: scale(1.02);
    }

    /* 弹窗样式优化 */
    .el-dialog {
      border-radius: 10px;
      overflow: hidden;
    }

    .el-dialog__header {
      background: linear-gradient(135deg, #409EFF 0%, #53a8ff 100%);
      color: white;
      padding: 20px;
      margin-right: 0px;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: white;
    }

    .el-dialog__title {
      color: white;
      font-weight: 600;
    }

    .el-dialog__body {
      padding: 30px;
    }

    /* 图片布局美化 */
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin: 15px 0;
      justify-content: flex-start;
    }

    .image-grid img {
      flex: 0 0 auto;
      max-width: 100%;
      margin: 0;
      object-fit: cover;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .header-center {
        padding: 30px 15px;
      }

      .header-center h1 {
        font-size: 28px;
      }

      .answer-step {
        padding: 15px;
      }

      .el-dialog {
        width: 95% !important;
        margin: 10px auto !important;
      }

      .image-grid {
        gap: 10px;
      }

      .image-grid img {
        max-width: 100%;
        flex: 0 0 auto;
      }

      .search-container,
      .faq-container {
        padding: 0 15px;
        box-sizing: border-box;
      }
    }
  </style>
</head>

<body>
  <!-- 添加加载指示器 -->
  <div class="page-loading" id="page-loading">
    <div class="loading-spinner"></div>
  </div>

  <div id="app" v-cloak>
    <div class="header-center">
      <h1>吸了么常见问题解答</h1>
      <p>查找您需要的解决方案</p>
    </div>

    <div class="search-container">
      <el-input v-model="searchQuery" placeholder="搜索问题..." clearable size="large">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>

    <div class="faq-container">
      <el-empty v-if="filteredQuestions.length === 0" description="没有找到匹配的问题"></el-empty>

      <el-card v-for="(item, index) in filteredQuestions" :key="index" class="faq-item" shadow="hover"
        @click="showAnswer(item)">
        <div class="question-header">
          <div>
            <el-tag class="category-tag" size="small" effect="dark" :type="getCategoryType(item.category)">
              {{ item.category }}
            </el-tag>
            {{ item.question }}
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 弹窗显示详细答案 -->
    <el-dialog v-model="dialogVisible" :title="currentQuestion.question" width="60%" top="10vh">
      <div v-html="currentQuestion.answer"></div>
    </el-dialog>
  </div>

  <!-- 引入Vue、Element Plus相关脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.4.2/dist/index.full.min.js"></script>
  <script>
    // 常见问题数据
    const faqData = [
      {
        id: 1,
        question: '如何使用微信小程序吸了么解锁设备?',
        answer: `
                    <div class="answer-content">
                        <h3>设备解锁方法</h3>
                        <h4>重点：使用微信小程序吸了么对设备解锁前一定要断开其他手机与设备的连接，一定要打开系统蓝牙和定位服务</h4>

                        <p>视频教程在文章最后<strong>步骤 5</strong></p>
                        <p>您可以通过以下方式解锁您的设备：</p>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">1</span><strong>首先找到设备二维码</strong></div>
                            <div><strong>有屏幕的设备</strong>如H03点击屏幕'设置'-'系统'，屏幕左侧显示一个二维码</div>
                            <div><strong>无屏幕的设备</strong>如30C设备后方电源开关上方有一个标签，上方显示有一个二维码(微信扫码)</div>
                            
                            <div class="image-grid">
                                <img width="400px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=f2c31SYlNyV0e5s6NuoTit2lBK3hax2-ZgdtOaQdFmoUAZPpqNnQK5GB23xW91cZGOYCuqP8vTwRizv_dxm50ieJSa3SSZhKpRVWuQjZu8oOo7XsPJso8oA&name=/h03pingmu.jpg" alt="h03pingmu.jpg"/>
                                <img width="400px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=86bf9AfwXmwABcroBOLmBgojcGELrvuWpQfasA7iSKXzzWnZsjkrqZ2-EJozJYLC-uGuFh2kKTld53WVyXOPWARFnbqz-wq9hNsu8ZQDjgCm5CfkTnER8UE&name=/30cpingmu.jpg" alt="30cpingmu.jpg"/>
                            </div>
                        </div>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">2</span><strong>打开微信使用微信扫一扫</strong></div>
                            <img width="400px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=5c17MUAktbXjhY4E0Qm4K5vadqhGUfrGCcjI6sotlsrkRwHpDfv2544_bdawD8n-gWu9Ncjyc7rPiMRY2qR_Yv586_ktkBmH7bnHZQcJc3j4Hc3PwgA&name=/weixin.jpg" alt="weixin.jpg"/>
                        </div>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">3</span><strong>进入吸了么</strong>允许使用<strong>'位置'</strong>权限，点击<strong>'快捷登录'</strong>，允许使用<strong>'蓝牙'</strong>,然后等待小程序与设备连接自动解锁</div>
                            
                            <div class="image-grid">
                                <img width="300px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=cb4e0s88YPkBCXybNmgy-T_WybKA_IDWnRMSuUO7JUw2ADX3ph7gMaiZR9dN-fCB2Dn7phDTayL11IaqdoaoblT60e8_UGeMKpoPnrCUmM8lW15hXMmkapGn6-w&name=/shouquweizhi.jpg" alt="shouquweizhi.jpg"/>
                                <img width="300px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=f4c1cVKnnX7SULYc4fTDAf1ks9HuB2iosqGsf1Zb0GJqFLB3PbqkQ3WVpME6_-ZhUwZ_zAkxHxEMqzqGwCPnMGmc46A5FR5FP460FP2uDRsvUBN6eR4&name=/denglu.jpg" alt="denglu.jpg"/>
                                <img width="300px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=d9c89ff-GKOGWCu-V-W9-WvRlGHI_Qj5EYeXfJ_WAxH20-wYMSR-vWRtTuvfu67uUekZecS_5BqMTSv3tapjL8gos5qKtQHptDiYLBiCLfsuXgcQHCTnm9Nz7mDp3M8&name=/jiesuochenggong.jpg" alt="jiesuochenggong.jpg"/>
                            </div>
                        </div>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">4</span><strong>第二个解锁方案:</strong> 如果以上流程未解锁或遇到问题无法解锁，请使用以下方案解锁</div>
                            <div>打开微信小程序-吸了么，登录后点击<strong>解锁设备</strong>（下图 1）或显示为<strong>'我的氢氧机'</strong>，点击<strong>'我的氢氧机'</strong>后，点击<strong>'添加设备'</strong>（下图 2)，允许使用<strong>'蓝牙'</strong>和<strong>'位置'</strong>权限，然后扫描设备二维码（步骤1）</div>
                            <div>扫码后小程序会进入到设备搜索界面(如下图 3),点击<strong>设备名称</strong>，即可解锁</div>
                            
                            <div class="image-grid">
                                <img width="300px" alt="图 1" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=41d7ShDos0pIaIRBy6kHqjZjWLmV9nsgqRW6mrd_DaW7wf0zCFPuqSZFEeMSjvC0hR6pR63_2_p_fwmekYp6Mx1uB75tYArCHsFuiCh8LHPTE9Hi2nY&name=/jiesuo.jpg" alt="jiesuo.jpg"/>
                                <img width="300px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=ab03pQxNvn3giZYs-Hu54mM3i30Gibhmqwa06Vy9eSV4mi877cDkgKMwmQ57k-MEgPlF8pAinGWZKchR8O7FgmxAuCJ0z2VamIJmxxWZA9Ac3x-jQmZLxg&name=/mydevice.jpg" alt="mydevice.jpg"/>
                                <img width="300px" alt="设备搜索" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=2968jj5qgsgJ0lw-rm2p46az800snyySNpwip7Zb7SRn4TenrTB4QE2OlLjhBdbb11m3Y4ya993NmmI5AOHQYTLfdSFO1iTDHwFeKPDx-UYOG5BkI0c&name=/shebei.jpg" alt="shebei.jpg"/>
                                <img width="300px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=6649pkBEQF02TM8jizedBXpyslUmtmGTiXRj-hCJpsHSNhr-hREo6BqNct5V3do8y75RvI5EC8fq4FmxOtu-SZRnLfEVJieD5qimrFi9RBh5ZLSmr9VnqFfp2jyK&name=/unlocksuccess.jpg" alt="unlocksuccess.jpg"/>
                            </div>
                        </div>

                        <div class="answer-step">
                            <div><span class="answer-step-number">5</span><strong>视频教程如下</strong></div>
                            <div style="display: flex; justify-content: center; width: 100%;">
                              <iframe width="400px" height="600px" class="embed-show" src="http://cloud.ascleway.cn/#fileView&path=http%3A%2F%2Fcloud.ascleway.cn%2F%3Fexplorer%2Fshare%2Ffile%26hash%3D4c43icIMcN_kNCh2J3aX4gRCiXr8T5DmVYAJw63TvKbT0Os6Bnwt9V33R6Xf32iH6c9KUt1IoZ4T5naW18YDzhqfbbET0On1aorb_1FD3baV9l6_0VUi2zEd3B11lzkGyTVlqYAh6E154glRTeIs7xnczdXqz-Faq83x9RLz%26name%3D%2F%25E5%2590%25B8%25E4%25BA%2586%25E4%25B9%2588%25E8%25AE%25BE%25E5%25A4%2587%25E8%25A7%25A3%25E9%2594%2581.mp4%26_etag%3Dfa7aa%26size%3D29315726" allowtransparency="true" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0" scrolling="no"></iframe>
                            </div>
                        </div>
                    </div>
                `,
        category: '解锁设备'
      },
      {
        id: 2,
        question: '安卓手机蓝牙连接不上设备如何解决?',
        answer: `
                    <div class="answer-content">
                        <h3>安卓手机解决各种权限问题</h3>
                        <h4>各种权限问题可以查找对比下列各个步骤的第一张图，找到如何解决权限问题的方法</h3>

                        <div class="answer-step">
                            <dvi>
                              <span class="answer-step-number">1</span>
                              <strong>系统蓝牙未开启</strong>  
                            </div>
                            <div>下滑手机屏幕<strong>控制中心</strong>，找到并点击<strong>蓝牙</strong>图标(图 2)，开启蓝牙</div>  
                           <div>如果<strong>控制中心</strong>没找到<strong>蓝牙</strong>图标，可以在手机的系统设置中找到<strong>蓝牙</strong>选项 如图 3，点击点击进入后开启<strong>蓝牙</strong>开关,如图 4</div> 
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=7dd95857gtNNIIrQZBLJKErvMt5jUCOWQhff3owHwvd-TeJzs06OdcPJxwvNmkJPUv9qv29BNb08pJsEyiCrYcOrXL_Kv0jhOUx-dOlWtV6K394dXzn8oelF0wh2-1Ex-bHOAB0&name=/Screenshot_20250415_115807.jpg" alt="Screenshot_20250415_115807.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=eb190GctNZwEbpkCIi3dtz7pF7vWuqaPkeyovTcq8MXlsk6B_gJNVYWKQgAq-eOsE2gD22BFwXJC00f3nJMcmKW1-okBWcdSDledSusilGhYAsZtHcOtWe1hqWRZoA&name=/IMG_20250415_133008.jpg" alt="IMG_20250415_133008.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=63eelf4hl2s-8oqRP1dyFbyzobXxLqyRoSoqQphs3ovHvtNNuWTz581cVizi7Ya-XPhbPE88oUfNp8oJMvaBR0Ft5mPWURR-PMNUr-1o4YorXBoZxpf05VUfeXaBCboa7fCnEM4&name=/Screenshot_20250415_133350.jpg" alt="Screenshot_20250415_133350.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=ba08elSNS_-LorG1f4kVORCM3ul2JCKbwIm-2O4ABjF3Yw6ywOeAv4W7IqFiawVGXh74DpNezxukmJwE5b4e6XwwXkBTck5NDUVesfchEEFPepLAkAYrBUEIJ_kD7Q&name=/IMG_20250415_133656.jpg" alt="IMG_20250415_133656.jpg"/>
                        </div>
                        
                        <div class="answer-step">
                          <div><span class="answer-step-number">2</span><strong>系统定位未打开</strong></div>
                          <div>下滑手机屏幕<strong>控制中心</strong>，找到并点击<strong>位置信息</strong>或<strong>定位服务</strong>图标(图 2)，开启系统定位</div>  
                          <div>如果<strong>控制中心</strong>没找到<strong>位置信息</strong>或<strong>定位服务</strong>图标，可以在手机的系统设置中找到<strong>位置信息</strong>或<strong>定位服务</strong>，在手机<strong>设置</strong>最上方搜索框，输入<strong>定位</strong>，点击<strong>位置信息</strong>或<strong>定位服务</strong>如图 4，点击进入后开启<strong>位置信息</strong>或<strong>定位服务</strong>开关,如图 5</div>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=5c25Mb-jVujG8waHCvOmpzFhetPrr2ZeVMoY7BpmFcBvohNVoB6CTv6YQ53IAhL6SAnaucWROpM_uiDAjzsZ-nlY-6U4NvTkCdc1FA6T5Zdre811mzY0LKoR20Hr74YsZe55vX8&name=/Screenshot_20250415_131136.jpg" alt="Screenshot_20250415_131136.jpg"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=db7d7xiAhAga71CzI8UcUu9LRTesFW6-0mPcZO28D7CulvyucHBAUwfABLfCsjn3e9wT2I9ETCBPfzWNHzevMz9pbSpcb7ASFVs_PHvddbxWqNP-9rS96eF-dEpC0Q&name=/IMG_20250415_134410.jpg" alt="IMG_20250415_134410.jpg"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=7dd3NiO5WnNJaIdSBUObeE7tTrCqN6pWx2O5RiWO4PmN7-8jcSeCm4AbZ2fDmNStMjcfrq2nm14IrSV2oAbcgASjvjzNXNmZCiwcFBWvnWxCCM5WQbH5xA1kkmSqsA&name=/IMG_20250415_132142.jpg" alt="IMG_20250415_132142.jpg"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=05f8q36SVk16lz62I00UIxGNERvWTx5KUOPp1gNsiTwsFhswLsAGu_6hf8VsQ77PeipIUY6rAU7LsBtblZl6CtCa5AKh-1zTWNsDW0lSFOOQLUyWdLp4lvKDbQ9tXQ&name=/IMG_20250415_132249.jpg" alt="IMG_20250415_132249.jpg"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=199aw0reqXTmeaEiivKfjGhMIGQI1oqJ7m93eLcFiOM7NXXMt0ajpCy6bsvGr0YXpjpZ-58E7rsAzbhhGcOxlxyF9RbQDe8cdMXQCDcv5FmA493TapN2d_u-ppQ_XkdfT-fIhLk&name=/Screenshot_20250415_132105.jpg" alt="Screenshot_20250415_132105.jpg"/>
                        </div>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">3</span><strong>微信定位权限未打开</strong></div>
                            <div>点击<strong>去开启</strong>，打开<strong>微信应用信息</strong>页面如图 2,点击<strong>权限</strong>，打开<strong>应用权限</strong>页面，点击<strong>定位</strong>如图 3，打开<strong>使用应用时允许</strong>或<strong>始终允许</strong>如图 4</div>
                           <h4>重点：如果权限设置页面（图 3）有<strong>附近的设备</strong>选项，一定要打开这个权限</h4>

                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=7eeahc1-2lRm8mJ0by-1eq00H3RTLcGMQyk4UuOmkv7tWWtQSX5GNDIJ4Lx-9mHea8aHTTQyMmI8CdFsHYDi9n-fCmqB_lf7cYOa9iC3VW0ZsEVGtUCxK65RS3Cm8zCM1WviTGs&name=/Screenshot_20250415_131201.jpg" alt="Screenshot_20250415_131201.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=8fb01HB7jMFS6dEgQKz2VCXwzm3f2V7wG3LE9c3M8acdj01mAXgM_doyZHpY3IwBYYBR0EOhOUedxvxMafZA1g-XvSKrFB_wzybbDPpWuRzGUpD-RQ_851Jdl2JZLdyhEWoo3fM&name=/Screenshot_20250415_140248.jpg" alt="Screenshot_20250415_140248.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=c190udpbz0JsdNhwj_W9nqQEqtC_dGuSmPbOGcixAgy_kaRY9b_ZRxrJUbqKlc6wvNLkAJPdSlCQjgs7OhzW8E5H2M6LLMUYDS8IPC5LcBdWQ3O-NNf2C6Wb1Ol2dj9jR3MemDA&name=/Screenshot_20250415_140316.jpg" alt="Screenshot_20250415_140316.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=3c78DvdOyG2OSjE9slcp0BT-csFlOaqPGPiRcHhMsqsXVuigS_SSNP_EIIFy6lnLqhTx7PppYXz_EOoj9kE40m5R6bNoj90r2whxud2FL-fN0NABTh7osnvrhe4SX1ZeFSg2jqs&name=/Screenshot_20250415_131215.jpg" alt="Screenshot_20250415_131215.jpg"/>
                        </div>

                          <div class="answer-step">
                            <div><span class="answer-step-number">4</span><strong>小程序定位权限或者蓝牙权限未打开</strong></div>
                            <div>点击<strong>去开启</strong>，打开吸了么小程序<strong>设置</strong>页面如图2,分别点击<strong>微信信息</strong>和<strong>蓝牙</strong>权限，勾选<strong>使用小程序时允许</strong>如图3</div>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=cf23Z0Ih-T6wpBoIsUo_sVT3m9vUEuc2sCDdeN6jYfafp0KvgLaX7O2c5bNYvtDuQm8ymlwE3EIg70ttSa0X2mCRQRxrHFwMDOkrFJopUz4bMBl1PMWxNkwrBAvmi8-AzIYnDeQ&name=/Screenshot_20250415_142015.jpg" alt="Screenshot_20250415_142015.jpg"/>                           
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=9ae2XGk1z-416i2eaj38cTe5bJEdvQ5S4RJm_ZhZRlU83mrwpsHSspOWPmdBfhzoU6CkCrxGPfQiUxYMZdZVl8n6HNv0tDJGxphb4ZxB81DabVSs_AwXAhE53a37zg&name=/IMG_20250415_131452.jpg" alt="IMG_20250415_131452.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=5be7x-ltOAe-dhd5lrFKYDe7HffsiFohwz67z5Ec8mEGPXHSxHAQSi6Tl3MgAn1zDrp4Guhtrw9dYyOsRwTBATGt0O2EcMx5yupaLSMt2el909bzFkSXBbXh2iklzg&name=/IMG_20250415_143539.jpg" alt="IMG_20250415_143539.jpg"/>
                          </div>
                          
                    </div>
                `,
        category: '安卓设备'
      },
      {
        id: 3,
        question: '苹果手机蓝牙连接不上设备如何解决?',
        answer: `
                    <div class="answer-content">
                        <h3>苹果手机找不到设备的解决方案</h3>
                        <h4>各种权限问题可以查找对比下列各个步骤的第一张图，找到如何解决权限问题的方法</h3>
                        
                        <div class="answer-step">
                            <dvi>
                              <span class="answer-step-number">1</span>
                              <strong>系统蓝牙未开启</strong>  
                            </div>
                            <div>下滑手机屏幕<strong>控制中心</strong>，找到并点击<strong>蓝牙</strong>图标(图 2)，开启蓝牙</div>  
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=cb6dGIHIiQT6TxAOvpZInyw8-He92LsH86ddaPOMofhkTCSUXwtKQrPciGpRgmO51XukSlonbcL3GA64sW74QErhRHWDwJ5VaUuYgFaRgQHpsg&name=/bleoff.png" alt="bleoff.png"/>                        
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=63b42H8eEMsTMnV282subAt7H78O8kUI5RLMnKPnNjnA_zM88JbyJa24UY3pkEYrRsQv06VP-MB-Fhr5UcUZ7UYI25WDNmoOuVGeGJHPqO8FKLWjKFje&name=/phonebleoff.jpg" alt="phonebleoff.jpg"/>                            
                        </div>
                        
                        
                       <div class="answer-step">
                          <div><span class="answer-step-number">2</span><strong>系统定位未打开</strong></div>
                          <div>打开手机的系统<strong>设置</strong>找到<strong>隐私与安全性</strong>（图 2），找到<strong>定位服务</strong>（图 3），点击进入后开启<strong>定位服务</strong>（图 4）</div>  
                          <div>如果<strong>控制中心</strong>没找到<strong>位置信息</strong>或<strong>定位服务</strong>图标，可以在手机的系统设置中找到<strong>位置信息</strong>或<strong>定位服务</strong>，在手机<strong>设置</strong>最上方搜索框，输入<strong>定位</strong>，点击<strong>位置信息</strong>或<strong>定位服务</strong>如图 4，点击进入后开启<strong>位置信息</strong>或<strong>定位服务</strong>开关,如图 5</div>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=1a30MaSOgG1tdA-rsXO5QBXz7QMn3DF7TK3BjnN9rS966UPAE8UUB5VIbGrr2gpcHy3PSZX09ezAbLV9tW_3jQN-i5Zm0oczVr580DN_3O9Sv646&name=/location.PNG" alt="location.PNG"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=f51cx6NP6-hSiDd1W1hPyEerB6NAOprAbJnrGYE__fba9ctMgOiUiGq1oadiOAjBk-Lr6iS5BkobeNLyV8EoB7IbDieqSa5tmZ1qnv0hL_Ndtsx7&name=/bleyinsi.png" alt="bleyinsi.png"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=9a1fCPiSs7WJw2YC5BJpXdYpz7FlIz2y__6T3hb1yYJGe3v0cAd3nYFJo3S89cOKhpzRr4F46BxOTwK90WwNciMrwOh9SguRcY3ZaScyQdc-Uw&name=/bleset.png" alt="bleset.png"/>
                          <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=fd40IpLeGHR3_wuWV_6vMZzHbJ4RfKic-FQoXafTIH7ZStq_2xK3HOBd8HoOlQ9k7nhoabddDwTxf5bZqV8ClTuGcjMMTZsOLap3q-IK61AM&name=/bleon.png" alt="bleon.png"/>
                        </div>
                        
                        <div class="answer-step">
                            <div><span class="answer-step-number">3</span><strong>微信定位权限未打开</strong></div>
                            <div>点击<strong>去开启</strong>，打开<strong>微信应用信息</strong>页面如图 2,打开<strong>位置</strong>和<strong>蓝牙</strong>开关</div>

                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=b67c6krdyxryMqZ9c5UCv4fGHgaSXOCs6jsKxW5xpzOyPuWS-wrKwfNM5eOOufTMHJW48UwKlOx4L6mJneYJyltyyNkDOSYAuCEomUN3o4mYdB7CWo5Udw&name=/weixinappble.png" alt="weixinappble.png"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=60b6JEiZi7TaDw1ytNXjWSyWFH4AJP8TTqRNonvtmKIVUmdK2cyTueJLwakZ4cuWVt-kv7Kb_oa02aiz5zmjdInZWcIubejyX_wHw4eQ7mFV_ZbAbw&name=/weixinble.png" alt="weixinble.png"/>
                          
                        </div>

                          <div class="answer-step">
                            <div><span class="answer-step-number">4</span><strong>小程序定位权限或者蓝牙权限未打开</strong></div>
                            <div>点击<strong>去开启</strong>，打开吸了么小程序<strong>设置</strong>页面如图2,分别点击<strong>微信信息</strong>和<strong>蓝牙</strong>权限，勾选<strong>使用小程序时允许</strong>如图3</div>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=cf23Z0Ih-T6wpBoIsUo_sVT3m9vUEuc2sCDdeN6jYfafp0KvgLaX7O2c5bNYvtDuQm8ymlwE3EIg70ttSa0X2mCRQRxrHFwMDOkrFJopUz4bMBl1PMWxNkwrBAvmi8-AzIYnDeQ&name=/Screenshot_20250415_142015.jpg" alt="Screenshot_20250415_142015.jpg"/>                           
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=9ae2XGk1z-416i2eaj38cTe5bJEdvQ5S4RJm_ZhZRlU83mrwpsHSspOWPmdBfhzoU6CkCrxGPfQiUxYMZdZVl8n6HNv0tDJGxphb4ZxB81DabVSs_AwXAhE53a37zg&name=/IMG_20250415_131452.jpg" alt="IMG_20250415_131452.jpg"/>
                            <img width="250px" height="90%" class="embed-show" src="http://cloud.ascleway.cn/?explorer/share/file&hash=5be7x-ltOAe-dhd5lrFKYDe7HffsiFohwz67z5Ec8mEGPXHSxHAQSi6Tl3MgAn1zDrp4Guhtrw9dYyOsRwTBATGt0O2EcMx5yupaLSMt2el909bzFkSXBbXh2iklzg&name=/IMG_20250415_143539.jpg" alt="IMG_20250415_143539.jpg"/>
                          </div>
                          
                        
                        
                    </div>
                `,
        category: '苹果设备'
      },

      // {
      //   id: 6,
      //   question: '如何连接Wi-Fi网络?',
      //   answer: `
      //               <div class="answer-content">
      //                   <h3>连接Wi-Fi网络的方法</h3>
      //                   <p>连接Wi-Fi网络的步骤如下：</p>

      //                   <h4>苹果设备：</h4>
      //                   <div class="answer-step">
      //                       <span class="answer-step-number">1</span>
      //                       <strong>打开设置</strong>：点击主屏幕上的"设置"图标
      //                   </div>

      //                   <div class="answer-step">
      //                       <span class="answer-step-number">2</span>
      //                       <strong>选择Wi-Fi</strong>：确保Wi-Fi已开启
      //                   </div>

      //                   <h4>安卓设备：</h4>
      //                   <div class="answer-step">
      //                       <span class="answer-step-number">1</span>
      //                       <strong>打开设置</strong>：下拉通知栏点击设置图标
      //                   </div>

      //                   <div class="answer-step">
      //                       <span class="answer-step-number">2</span>
      //                       <strong>选择网络和互联网</strong>：点击"网络和互联网"选项
      //                   </div>

      //                   <video controls poster="https://cdn.pixabay.com/photo/2017/01/22/22/11/wifi-2001648_960_720.jpg">
      //                       <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      //                       您的浏览器不支持视频标签。
      //                   </video>
      //               </div>
      //           `,
      //   category: '通用问题'
      // }
    ];

    // 当DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
      // 创建Vue应用
      const { createApp, ref, computed } = Vue;
      const { ElIcon, ElInput, ElCard, ElTag, ElDialog, ElEmpty } = ElementPlus;

      const app = createApp({
        setup () {
          const searchQuery = ref('');
          const dialogVisible = ref(false);
          const currentQuestion = ref({});

          const filteredQuestions = computed(() => {
            if (!searchQuery.value) {
              return faqData;
            }
            const query = searchQuery.value.toLowerCase();
            return faqData.filter(q =>
              q.question.toLowerCase().includes(query) ||
              q.category.toLowerCase().includes(query)
            );
          });

          function showAnswer (question) {
            currentQuestion.value = question;
            dialogVisible.value = true;
          }

          function getCategoryType (category) {
            const typeMap = {
              '解锁设备': 'success',
              '安卓设备': 'info',
              '苹果设备': 'info',
              '通用问题': 'warning'
            };
            return typeMap[category] || 'primary';
          }

          return {
            searchQuery,
            dialogVisible,
            currentQuestion,
            filteredQuestions,
            showAnswer,
            getCategoryType
          };
        }
      });

      // 使用Element Plus
      app.use(ElementPlus);

      // 挂载应用
      app.mount('#app');

      // 隐藏加载指示器
      document.getElementById('page-loading').style.display = 'none';
    });
  </script>

  <!-- 添加直接隐藏加载指示器的备用脚本 -->
  <script>
    // 如果5秒后加载指示器仍然显示，则强制隐藏它
    setTimeout(function () {
      var loader = document.getElementById('page-loading');
      if (loader) {
        loader.style.display = 'none';
      }
    }, 5000);
  </script>
</body>

</html>